import {TouchableOpacity} from 'react-native';
import React, {useImperativeHandle} from 'react';
import Icon from '@react-native-vector-icons/fontawesome';

export default function BaseItem({
  item = {},
  onSelect,
  onFavorite,
  changeFavorite,
  ref,
}) {
  const setFavoriteState = flag => {
    changeFavorite({...item, isFavorite: flag});
  };

  const onItemClick = () => {
    onSelect &&
      onSelect(flag => {
        setFavoriteState(flag);
      });
  };

  useImperativeHandle(ref, () => ({
    onItemClick,
  }));

  const onPressFavorite = () => {
    onFavorite && onFavorite(item, !item.isFavorite);
    setFavoriteState(!item.isFavorite);
  };

  return (
    <TouchableOpacity
      style={{padding: 6}}
      activeOpacity={1}
      underlayColor={'transparent'}
      onPress={onPressFavorite}>
      <Icon
        name={item.isFavorite ? 'star' : 'star-o'}
        size={26}
        style={{color: '#678'}}
      />
    </TouchableOpacity>
  );
}
